<template>
  <view class="obj-money-price-range">
    <scroll-view 
      scroll-x 
      :show-scrollbar="false"
      enhanced
      :fast-deceleration="true"
      class="obj-money-scroll-container"
    >
      <view class="obj-money-price-list">
        <view 
          v-for="(item, index) in priceRanges" 
          :key="index"
          :class="['obj-money-price-item', selectedIndex === index ? 'active' : '']"
          @tap="selectPrice(index)"
        >
          {{ item }}
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      priceRanges: ['100元以下', '100-200元', '200-300元', '300-400元', '500-800元', '800元以上'],
      selectedIndex: 0
    }
  },
  methods: {
      selectPrice(index) {
        this.selectedIndex = index
      }
  }
}
</script>

<style lang="scss" scoped>
.obj-money-price-range {
  width: 100%;
  
  .obj-money-scroll-container {
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    
    .obj-money-price-list {
      padding: 10px;
      display: flex;
      
      .obj-money-price-item {
        padding: 8px 15px;
        margin-right: 10px;
        font-size: 14px;
        color: #333;
        position: relative;
        
        &::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 0;
          height: 3px;
          background: #000;
          border-radius: 1px;
          transition: all 0.3s ease;
          opacity: 0;
        }
        
        &.active::after {
          width: 20px;
          opacity: 1;
        }
        
        &.active {
          color: #000;
          font-weight: bold;
        }
      }
    }
  }
}
</style>
